<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 侧边栏样式 -->
<style>
/* 侧边栏样式 */
.sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 250px;
    background-color: white;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto;
    z-index: 100;
    padding-top: 20px;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu > li {
    margin-bottom: 5px;
}

.sidebar-menu > li > a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.sidebar-menu > li > a:hover {
    background-color: #f0f0f0;
    border-left-color: #1976d2;
}

.sidebar-menu > li > a.active {
    background-color: #e3f2fd;
    border-left-color: #1976d2;
    color: #1976d2;
}

.sidebar-menu > li > a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

.sidebar-submenu {
    list-style: none;
    padding-left: 53px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sidebar-menu > li.open .sidebar-submenu {
    max-height: 500px;
}

.sidebar-submenu > li > a {
    display: block;
    padding: 8px 0;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
}

.sidebar-submenu > li > a:hover {
    color: #1976d2;
}

.sidebar-submenu > li > a.active {
    color: #1976d2;
    font-weight: 500;
}

/* 箭头图标样式 */
.sidebar-menu > li > a .bi-chevron-down {
    transition: transform 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
}
</style>

<!-- 侧边栏 -->
<div class="sidebar">
    <ul class="sidebar-menu">
        <li>
            <a href="${pageContext.request.contextPath}/student/home">
                <i class="bi bi-house-door"></i> 学生首页
            </a>
        </li>
        <li>
            <a href="#" class="has-submenu" onclick="toggleSubmenu(this)">
                <i class="bi bi-megaphone"></i> 通知公告
                <i class="bi bi-chevron-down ms-auto"></i>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="${pageContext.request.contextPath}/student/notifications/academic">教务通知</a></li>
                <li><a href="${pageContext.request.contextPath}/student/notifications/exam">考试安排</a></li>
                <li><a href="${pageContext.request.contextPath}/student/notifications/classroom">教室安排</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="has-submenu" onclick="toggleSubmenu(this)">
                <i class="bi bi-building"></i> 院系管理
                <i class="bi bi-chevron-down ms-auto"></i>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="${pageContext.request.contextPath}/student/college">学院管理</a></li>
                <li><a href="${pageContext.request.contextPath}/student/major">专业管理</a></li>
                <li><a href="${pageContext.request.contextPath}/student/class">班级管理</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="has-submenu" onclick="toggleSubmenu(this)">
                <i class="bi bi-book"></i> 课程管理
                <i class="bi bi-chevron-down ms-auto"></i>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="${pageContext.request.contextPath}/student/courses">课程管理</a></li>
                <li><a href="${pageContext.request.contextPath}/student/my-courses">我的课程</a></li>
                <li><a href="${pageContext.request.contextPath}/student/schedule">我的课表</a></li>
                <li><a href="${pageContext.request.contextPath}/student/grades">成绩管理</a></li>
                <li><a href="${pageContext.request.contextPath}/student/evaluation">课程评价</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="has-submenu" onclick="toggleSubmenu(this)">
                <i class="bi bi-clipboard-check"></i> 教学管理
                <i class="bi bi-chevron-down ms-auto"></i>
            </a>
            <ul class="sidebar-submenu">
                <li><a href="${pageContext.request.contextPath}/student/leave">请假管理</a></li>
                <li><a href="${pageContext.request.contextPath}/student/homework">作业提交</a></li>
                <li><a href="${pageContext.request.contextPath}/student/attendance">考勤管理</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
// 侧边栏功能JavaScript
function toggleSubmenu(element) {
    const parent = element.parentElement;
    const chevron = element.querySelector('.bi-chevron-down');
    
    // 关闭其他打开的子菜单
    document.querySelectorAll('.sidebar-menu > li').forEach(li => {
        if (li !== parent && li.classList.contains('open')) {
            li.classList.remove('open');
            const otherChevron = li.querySelector('.bi-chevron-down');
            if (otherChevron) {
                otherChevron.style.transform = 'rotate(0deg)';
            }
        }
    });
    
    // 切换当前子菜单
    parent.classList.toggle('open');
    
    // 切换图标旋转
    if (chevron) {
        if (parent.classList.contains('open')) {
            chevron.style.transform = 'rotate(180deg)';
        } else {
            chevron.style.transform = 'rotate(0deg)';
        }
    }
}

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    // 自动展开包含当前页面的菜单
    const currentPath = window.location.pathname;
    const menuItems = document.querySelectorAll('.sidebar-submenu a');
    
    menuItems.forEach(item => {
        const href = item.getAttribute('href');
        if (href && currentPath.includes(href.split('/').pop())) {
            // 添加活动状态
            item.classList.add('active');
            
            // 展开父菜单
            const parentLi = item.closest('.sidebar-menu > li');
            if (parentLi) {
                parentLi.classList.add('open');
                const chevron = parentLi.querySelector('.bi-chevron-down');
                if (chevron) {
                    chevron.style.transform = 'rotate(180deg)';
                }
            }
        }
    });
    
    // 检查主菜单项
    const mainMenuItems = document.querySelectorAll('.sidebar-menu > li > a:not(.has-submenu)');
    mainMenuItems.forEach(item => {
        const href = item.getAttribute('href');
        if (href && currentPath.includes(href.split('/').pop())) {
            item.classList.add('active');
        }
    });
    
    // 用户下拉菜单功能
    const userAvatar = document.getElementById('userAvatar');
    const userName = document.getElementById('userName');
    const userDropdown = document.getElementById('userDropdown');

    if (userAvatar && userName && userDropdown) {
        const toggleDropdown = function() {
            userDropdown.classList.toggle('show');
        };

        userAvatar.addEventListener('click', toggleDropdown);
        userName.addEventListener('click', toggleDropdown);

        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', function(event) {
            const dropdownContainer = document.getElementById('userDropdownContainer');
            if (dropdownContainer && !dropdownContainer.contains(event.target)) {
                userDropdown.classList.remove('show');
            }
        });
    }
});
</script> 